import React from 'react'
import "./List.less"
import { Link } from "react-router-dom"
function List(props) {
    let arr = ['热门商品', '推荐商品', '水果专区', '粮油调味  '];
    let { n, setN, goodslist } = props
    return (
        <div className="list">
            <div className="list-nav">
                {
                    arr.map((item, index) => (
                        <div key={item} className={index === n ? 'select' : ''} onClick={() => setN(index)}>{item}</div>
                    ))
                }
            </div>
            {
                goodslist.map(item => (
                    <Link key={item.id} to={"/detail?id=" + item.id + "&type=1"}>
                        <div className="neirong">
                            <img src={item.img} alt="" />
                            <div>
                                <h2>{item.goodsname}</h2>
                                <span>{item.description}</span>
                                <p>￥{item.price}</p>
                                <button >加入购物车</button>
                            </div>
                        </div>
                    </Link>
                ))
            }
        </div>
    )
}
export default React.memo(List)
